<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>{:config('web_site_title')} - {:lang('管理员登录')}</title>
	<meta name="viewport" content="user-scalable=no">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="__PLUG__/jqueryToast/css/toast.css">
	<link rel="stylesheet" href="__ADMIN_CSS__/style.css">
	<style type="text/css">
		html,
		body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;

		}

		@media screen and (max-width: 960px) {

			/* 手机端CSS代码 */
			#particles-js {
				width: 100vw;
				height: 100vh;
				position: relative;
				background-image: url(__ADMIN_IMG__/loging_bg3.jpg);
				background-position: 50% 50%;
				background-size: cover;
				background-repeat: no-repeat;
				margin-left: auto;
				margin-right: auto;
			}

			.loginli {
				width: 100vw;
				height: 100vh;
				position: relative;
			}

			.login_con {
				height: 450px;
				width: 80%;
				position: relative;
				position: absolute;
				margin-top: -225px;
				top: 50%;
				left: 10%;
			}

			.login_con_left {
				width: 570px;
				height: 570px;
				background: rgba(240, 236, 236, 0.8);
				display: none;
			}

			.login_con_left img {
				height: 58px;
				width: 200px;
				margin: 190px 185px;
			}

			.login_con_right {
				width: 100%;
				height: 100%;
				background: rgba(255, 255, 255, 0.9);
				margin: auto;
			}

			.login_ul {
				width: 250px;
				height: 100%;
				margin: auto;
				text-align: center;
			}

			.login_tc1 {
				height: 88px;
				width: 100%;
			}

			.login_tc2 {
				height: 40px;
				width: 100%;
			}

			.login_tc3 {
				height: 36px;
				width: 100%;
			}

			.login_tc4 {
				height: 28px;
				width: 100%;
			}

			.login_tit {
				font-size: 24px;
				font-weight: bold;
				color: rgba(74, 173, 225, 1);
			}

			.login_form {
				height: 50px;
				width: 100%;
				outline: none;
				text-align: center;
				padding: 0 !important;
				margin: 0 !important;
				border: none !important;
				border-bottom: 1px solid #D9D9D9 !important;
			}

			.login_form1 {
				outline: none;
				height: 50px;
				width: 100%;
				padding: 0 !important;
				margin: 0 !important;
				border: none !important;
				border-bottom: 1px solid #D9D9D9 !important;
			}

			.login_post {
				outline: none;
				outline-color: rgba(255, 255, 255, 0);
				width: 100%;
				height: 40px;
				background-color: rgba(45, 179, 249, 1);
				color: #fff;
				font-size: 14px;
				font-weight: 400;
				cursor: pointer;
				border-radius: 20px;
			}

			.login_post_button {
				cursor: pointer;
				height: 60px;
				line-height: 60px;
				text-align: center;
				color: rgba(45, 179, 249, 1);
				font-size: 14px;
			}

			.login_inputll {
				position: relative;
				line-height: 50px;
			}

			.login_inputyzm {
				font-size: 14px;
				color: rgba(45, 179, 249, 1);
				position: absolute;
				right: 0;
				cursor: pointer;
				top: 0;
			}
		}

		@media screen and (min-width: 960px) {

			/* 电脑端CSS代码 */
			#particles-js {
				width: 100vw;
				height: 100vh;
				position: relative;
				background-image: url(__ADMIN_IMG__/loging_bg3.jpg);
				background-position: 50% 50%;
				background-size: cover;
				background-repeat: no-repeat;
				margin-left: auto;
				margin-right: auto;
			}

			.loginli {
				width: 100vw;
				height: 100vh;
				min-height: 570px;
				position: relative;
			}

			.login_con {
				height: 570px;
				width: 1020px;
				position: absolute;
				margin-top: -260px;
				top: 50%;
				left: 50%;
				margin-left: -510px;
			}

			.login_con_left {
				width: 570px;
				height: 570px;
				background: rgba(240, 236, 236, 0.8);
				float: left;
			}

			.login_con_left img {
				height: 65px;
				width: 200px;
				margin: 190px 185px;
				float: right;
			}

			.login_con_right {
				width: 450px;
				height: 570px;
				background: rgba(255, 255, 255, 0.8);

			}

			.login_ul {
				width: 250px;
				height: 100%;
				margin: auto;
				text-align: center;
			}

			.login_tc1 {
				height: 138px;
				width: 100%;
			}

			.login_tc2 {
				height: 40px;
				width: 100%;
			}

			.login_tc3 {
				height: 36px;
				width: 100%;
			}

			.login_tc4 {
				height: 80px;
				width: 100%;
			}

			.login_tit {
				font-size: 24px;
				font-weight: bold;
				color: rgba(74, 173, 225, 1);
			}

			.login_form {
				height: 50px;
				width: 100%;
				outline: none;
				text-align: center;
				padding: 0 !important;
				margin: 0 !important;
				border: none !important;
				border-bottom: 1px solid #D9D9D9 !important;
			}

			.login_form1 {
				outline: none;
				height: 50px;
				width: 100%;
				padding: 0 !important;
				margin: 0 !important;
				border: none !important;
				border-bottom: 1px solid #D9D9D9 !important;
			}

			.login_post {
				outline: none;
				outline-color: rgba(255, 255, 255, 0);
				width: 100%;
				height: 40px;
				background-color: rgba(45, 179, 249, 1);
				color: #fff;
				font-size: 14px;
				font-weight: 400;
				cursor: pointer;
				border-radius: 20px;
			}

			.login_post_button {
				cursor: pointer;
				height: 60px;
				line-height: 60px;
				text-align: center;
				color: rgba(45, 179, 249, 1);
				font-size: 14px;
			}

			.login_inputll {
				position: relative;
				line-height: 50px;
			}

			.login_inputyzm {
				font-size: 14px;
				color: rgba(45, 179, 249, 1);
				position: absolute;
				right: 0;
				cursor: pointer;
				top: 0;
			}
		}

		@media screen and (min-width: 320px) {
			.login_ul {
				width: 250px;
				height: 100%;
				margin: auto;
				text-align: center;
			}

			.login_tit {
				font-size: 16px;
				font-weight: bold;
				color: rgba(74, 173, 225, 1);
			}
		}

		.login_form::-webkit-input-placeholder {
			/* Chrome/Opera/Safari */
			color: #606266;
			font-size: 14px;
			text-align: center;
		}

		.login_form::-moz-placeholder {
			/* Firefox 19+ */
			color: #606266;
			font-size: 14px;
			text-align: center;
		}

		.login_form:-ms-input-placeholder {
			/* IE 10+ */
			color: #606266;
			font-size: 14px;
			text-align: center;
		}

		.login_form:-moz-placeholder {
			/* Firefox 18- */
			color: #606266;
			font-size: 14px;
			text-align: center;
		}

		.login_form1::-webkit-input-placeholder {
			/* Chrome/Opera/Safari */
			color: #606266;
			font-size: 14px;
		}

		.login_form1::-moz-placeholder {
			/* Firefox 19+ */
			color: #606266;
			font-size: 14px;
		}

		.login_form1:-ms-input-placeholder {
			/* IE 10+ */
			color: #606266;
			font-size: 14px;
		}

		.login_form1:-moz-placeholder {
			/* Firefox 18- */
			color: #606266;
			font-size: 14px;
		}
	</style>
</head>

<body>
<div id="particles-js">
	<div class="loginli">
		<div class="login_con">
			<div class="login_con_left" style="float:left;">
				<!-- <img src="__ADMIN_IMG__/logo_xs_white_new.png"> -->
			</div>
			<div class="login_con_right" style="float:right;" id="mj_login_wrapper">
				<div class="login_ul">
					<form action="{:url()}" method="post" class="form-vertical" id="login" data-validator-option="{timely:0, theme:'bootstrap'}">
						<div class="login_tc1"></div>
						<div class="login_tit">{:config('web_site_title')}</div>
						<div class="login_tc2"></div>
						<div>
							<input class="login_form" type="text" name='username' style="color: #606266;" id='username' value=""
								   placeholder="{:lang('请输入账号')}" onfocus="this.placeholder=''" onblur="this.placeholder='请输入账号'" />
						</div>
						<div>
							<input class="login_form" type="password" style="color: #606266;" name='password' id='password' placeholder="{:lang('请输入密码')}"
								   onfocus="this.placeholder=''" onblur="this.placeholder='请输入密码'" />
						</div>
						{notempty name="Think.config.captcha_signin"}
						<div class="login-center clearfix" style="    margin-top: 10px;margin-bottom: 10px;">
							<div class="login-center-input" style="width: 100%;margin-left: 0;">
								{if addons_config('captcha.is_first')==1}
								{:hook('admin_captcha')}
								{else/}
								<input type="text" name='captcha' id='captcha' placeholder="{:lang('请输入验证码')}" onfocus="this.placeholder=''" onblur="this.placeholder='请输入验证码'"/>
								<div class="login-center-input-text">{:lang('验证码')}</div>
								<label class="img" style="position: absolute;right: 0;top: -1px;z-index: 10;"> <img style='vertical-align:middle;cursor:pointer;height:29px;border-radius: 3px;' onclick="this.src='{:captcha_src('admin')}?d='+Math.random();" class='verifyImg' src='{:captcha_src('admin')}' title='刷新验证码' /> </label>
								{/if}
							</div>
						</div>
						{/notempty}



						<div><button type="submit" class="login_post" style="border: 0;">{:lang('立即登录')}</button></div>

					</form>
				</div>
			</div>

	</div>
</div>
<!-- scripts -->
<script src="__PLUG__/jquery/jquery.min.js"></script>
<script src="__PLUG__/layer/layer.js"></script>
<script src="__PLUG__/jqueryToast/js/toast.js"></script>
<script src="__PLUG__/nice-validator/jquery.validator.min.js?local=zh-CN"></script>
<script src="__PLUG__/other/particles.min.js"></script>
<script src="__ADMIN_JS__/stars.js"></script>
	<script src="__ADMIN_JS__/jquery.md5.js"></script>

<script>
	function hasClass(elem, cls) {
		cls = cls || '';
		if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
		return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
	}

	function addClass(ele, cls) {
		if (!hasClass(ele, cls)) {
			ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
		}
	}

	function removeClass(ele, cls) {
		if (hasClass(ele, cls)) {
			var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
			while (newClass.indexOf(' ' + cls + ' ') >= 0) {
				newClass = newClass.replace(' ' + cls + ' ', ' ');
			}
			ele.className = newClass.replace(/^\s+|\s+$/g, '');
		}
	}
	$(document).ready(function() {
		$('#forget_password_btn').on('click', function(e) {
			$('#mj_login_wrapper').css('display', 'none')
			$('#mj_forget_password_wrapper').css('display', 'block')
		})
		$('#mj_login_btn').on('click', function(e) {
			$('#mj_login_wrapper').css('display', 'block')
			$('#mj_forget_password_wrapper').css('display', 'none')
		})
		//登录
		$('#login').on('valid.form', function(e) {
			if ($("#username").val().length < 1) {
				layer.msg("{:lang('请输入用户名')}");
				return false;
			}

			/*if($("#username").val() != 'admin'){
				if(!(/^1[3456789]\d{9}$/.test($("#username").val()))){
					layer.msg('请使用手机号登录');
					return false;
				}
			}*/

			if ($("#password").val().length < 1) {
				layer.msg("{:lang('请输入密码')}");
				return false;
			}

			if (!$('#lCaptchaToken').val() && $('#lCaptchaToken').val()!=undefined) {
				$('.lCaptchaShow').click();
				return false;
			}
			var name = $('input[name="username"]').val(),
					pwd = $('input[name="password"]').val(),
					captcha = $('input[name="captcha"]').val(),
					login_data={
				"username":name,
				// "password":$.md5(pwd),
				"password":pwd,
				"captcha":captcha
			};

			$.post($(this).attr('action'), login_data, function(res) {
				if (res.code) {
					layer.msg("{:lang('登录成功，欢迎您回来')}");
					setTimeout(function() {
						location.href = res.url;
					}, 1500);
				} else {
					if (res.msg == "{:lang('未验证')}" || res.msg == "{:lang('验证失败')}" || res.msg == "{:lang('验证失效，请重新验证')}") {
						$('.lCaptchaShow').click();
					} else {
						$('.lCaptchaBtn').removeClass('success').addClass('error');
						$('.lCaptchaBtn').html("{:lang('请重新验证')}");
						$('#lCaptchaToken').val('');
						layer.msg(res.msg);
					}
					// if (res.code == 0) {
					// 	reset();
					// }
				}
			}).fail(function() {
				layer.msg("{:lang('服务器错误')}");
			});
			return false;
		});
		//找回密码
		$('#login1').on('valid.form', function(e) {
			var $data = $(this).serialize();
			console.log($data);
			if ($("#phone").val().length > 0) {
				if ($("#captcha").val().length > 0) {
					if ($("#new_password").val().length > 0) {
						if ($("#new_password").val() == $("#again_password").val()) {

							$.post($(this).attr('action'), $data, function(res) {
								if (res.code) {
									layer.msg("{:lang('找回密码成功，请重新登录')}");
									setTimeout(function() {
										location.href = res.url;
									}, 1500);
								} else {
									if (res.msg == "{:lang('验证码错误或失效')}") {
										$('#captcha').click();
									}
									layer.msg(res.msg);
								}
							}).fail(function() {
								layer.msg("{:lang('服务器错误')}");
							});
							return false;
						} else {
							layer.msg("{:lang('重复密码输入不对')}");
						}
					} else {
						layer.msg("{:lang('请输入新密码')}");
					}
				} else {
					layer.msg("{:lang('请输入验证码')}");
				}
			} else {
				layer.msg("{:lang('请输入手机号')}");
			}
		});
		//发送验证码
		$('#login_inputyzm').on('click', function() {
			$.post('send_code', {
				reg_phone: $("#phone").val()
			}, function(res) {
				if (res.code) {
					yZmPost();
				} else {
					layer.msg(res.msg);
				}
			}).fail(function() {
				layer.msg("{:lang('服务器错误')}");
			});
			return false;

		});
	});
	//发送验证码成功后变化。
	function yZmPost() {
		var time = 60;
		$('#login_inputyzm').css('display', 'none');
		$('#login_inputyzmMB').css('display', 'block');
		var tiemer = setInterval(function() {
			time--;
			$('#login_inputyzmMB').html(time + 's');
			if (time == 0) {
				clearTimeout(tiemer);
				$('#login_inputyzm').css('display', 'block');
				$('#login_inputyzmMB').css('display', 'none');
			}
		}, 1000)
	}
	(function($) {
		$.fn.placeholder = function(options) {
			var opts = $.extend({}, $.fn.placeholder.defaults, options);
			var isIE = document.all ? true : false;
			return this.each(function() {
				var _this = this,
						placeholderValue = _this.getAttribute("placeholder"); //缓存默认的placeholder值
				if (isIE) {
					_this.setAttribute("value", placeholderValue);
					_this.onfocus = function() {
						$.trim(_this.value) == placeholderValue ? _this.value = "" : '';
					};
					_this.onblur = function() {
						$.trim(_this.value) == "" ? _this.value = placeholderValue : '';
					};
				}
			});
		};
	})(jQuery);
	$("input").placeholder();
</script>
</body>
</html>
